<template>
  <view v-if="isLoaded">
    <u-sticky>
      <view class="date-box" style="color: #fff" @click="showCalendar = true">
        <text>{{ param.dataTimeRange[0] }}</text>
        <text style="margin: 0 8px">至</text>
        <text>{{ param.dataTimeRange[1] }}</text>
        <uni-icons
          color="#fff"
          class="ml-10"
          custom-prefix="custom-icon"
          type="custom-icon-xiajiantou"
          size="20"
        />
      </view>
    </u-sticky>
    <view class="card">
      <view class="bg" />
      <view class="items">
        <view class="justify-around">
          <view class="flex-column">
            <view class="item-big-title">储值汇总(元)</view>
            <view class="item-big-content">{{
              pageData.allAmount.toFixed(2)
            }}</view>
          </view>
          <view class="flex-column">
            <view class="item-big-title">储值合计(元)</view>
            <view class="item-big-content">{{
              pageData.rechargeAllAmount.toFixed(2)
            }}</view>
          </view>
        </view>
        <view class="justify-around">
          <view class="justify-column">
            <view class="item-title">储值金额</view>
            <view class="item-content">{{
              pageData.rechargeAmount.toFixed(2)
            }}</view>
          </view>
          <view class="justify-column">
            <view class="item-title">赠送金额</view>
            <view class="item-content">{{
              pageData.giftAmount.toFixed(2)
            }}</view>
          </view>
          <view class="justify-column">
            <view class="item-title">消费合计(元)</view>
            <view class="item-content">{{
              pageData.consumeAllAmount.toFixed(2)
            }}</view>
          </view>
        </view>
        <u-gap height="1" bgColor="#f1f1f1" />
        <view class="justify-around">
          <view class="justify-column">
            <view class="item-title">储值余额消费</view>
            <view class="item-content">{{
              pageData.rechargeConsumeAmount.toFixed(2)
            }}</view>
          </view>
          <view class="justify-column">
            <view class="item-title">赠送余额消费</view>
            <view class="item-content">{{
              pageData.giftConsumeAmount.toFixed(2)
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-calendar
      :show="showCalendar"
      :monthNum="15"
      :mode="'range'"
      @confirm="confirm"
      :allowSameDay="true"
      @close="showCalendar = false"
    />
  </view>
</template>

<script>
import date from "@/utils/date";
import { uShowLoading, uHideLoading } from "../../../utils/uniUtils";
export default {
  data() {
    return {
      isLoaded: false,
      showCalendar: false,
      pageData: {},
      param: {
        dataTimeRange: [date.getToday(), date.getToday()],
      },
    };
  },
  async onLoad() {
    try {
      uShowLoading();
      await this.getPageData();
      this.isLoaded = true;
      uHideLoading();
    } catch (error) {
      console.log("error", error);
    } finally {
      this.isLoaded = true;
      uHideLoading();
    }
  },
  methods: {
    confirm(e) {
      this.param.dataTimeRange = [e[0], e[e.length - 1]];
      this.getPageData();
      this.showCalendar = false;
    },
    async getPageData() {
      const res = await this.$api.GetRechargeConsume(this.param);
      this.pageData = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.date-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $my-main-color;
  padding: 20rpx;
  font-size: 14px;
}

.card {
  padding: 0 20rpx;
  position: relative;
  .bg {
    width: 100%;
    height: 120rpx;
    border-radius: 0 0 3% 3%;
    background-color: $my-main-color;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .items {
    padding: 30rpx;
    border-radius: 10rpx;
    background: #fff;
  }
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

.flex-column {
  display: flex;
  padding: 30rpx 0;
  padding-top: 0;
  flex-direction: column;
  align-items: center;
}

.item-title {
  font-size: 12px;
  margin: 8px;
}
.item-big-title {
  font-size: 16px;
}

.item-big-content {
  color: #f3c45d;
  margin-top: 5px;
  font-size: 14px;
  text-align: center;
}
.item-content {
  margin-bottom: 8px;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
}
</style>
